<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properities -->
  <title>Abyss</title>

  <link rel="stylesheet" type="text/css" href="<?php echo SCS::url()->base ?>/asset/semantic/semantic.min.css" />
  <link rel="stylesheet" type="text/css" href="<?php echo SCS::url()->base ?>/asset/pretty/pretty.json.css" />
  
  <script type="text/javascript" src="<?php echo SCS::url()->base ?>/asset/js/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="<?php echo SCS::url()->base ?>/asset/semantic/semantic.min.js"></script>
  <script type="text/javascript" src="<?php echo SCS::url()->base ?>/asset/js/underscore.min.js"></script>
  <script type="text/javascript" src="<?php echo SCS::url()->base ?>/asset/js/backbone.min.js"></script>
  <script type="text/javascript" src="<?php echo SCS::url()->base ?>/asset/pretty/pretty.json.min.js"></script>
  
  <style type="text/css">
  body {
    background-color: #FFFFFF;
  }
  .ui.inverted.menu{background:#2185d0;}
  .ui.menu .item img.logo {
    margin-right: 1.5em;
  }
  .main.container {
    margin-top: 7em;
  }
  .wireframe {
    margin-top: 2em;
  }
  .ui.footer.segment {
    margin: 5em 0em 0em;
    padding: 5em 0em;
  }
  .slide-right{background:url(<?php echo SCS::url()->base?>/asset/image/slide_right.png) no-repeat;width:48px;display:inline-block;height:21px;vertical-align:top;}
 .section-block .section{display:none;}
</style>

</head>
<body>

  <div class="ui fixed inverted menu">
    <div class="ui container">
      <div class="ui simple dropdown item">
        <img class="logo" src="<?php echo SCS::url()->base?>/asset/image/logo.png" onclick="window.location.href='<?php echo SCS::url()->create('doc')?>';">
        API <i class="dropdown icon"></i><?php echo str_repeat('&nbsp;', 10)?>
        <div class="menu">
          <?php foreach($this->docs as $desc=>$doc) {?>
          <div class="item">
            <i class="dropdown icon"></i>
            <span><?php echo $desc ?></span>
            <div class="menu">
                <?php foreach($doc as $d) {?>
                <a class="item" href="<?php echo SCS::url()->create('doc/'.str_replace('/', '::', $d['api']))?>"><?php echo $d['desc']?></a>
                <?php }?>
            </div>
          </div>
          <?php }?>
        </div>
        <a href=""><?php echo $this->doc['api']?></a>
      </div>
    </div>
  </div>

  <div class="ui main text container">
        <div class="section-block">
        <h1><?php echo $this->doc['desc']?></h1>
        <h3><?php echo $this->doc['api']?></h3>
        <div class="ui tabular menu">
            <a class="item active" data-section="first">请求参数</a>
            <a class="item" data-section="second">返回数据</a>
            <a class="item" data-section="third">在线测试</a>
        </div>
        
        <div class="section first" style="display:block;">
            <?php $params = isset($this->doc['param']) ? $this->doc['param'] : [];?>
            <?php if(count($params)) {?>
            <table class="ui table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>类型</th>
                    <th>说明</th>
                    <th>缺省值</th>
                    <th>必须</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($params as $param) {?>
                <tr>
                    <td><?php echo $param[1]?></td>
                    <td><?php echo ucfirst($param[0])?></td>
                    <td><?php echo $param[2]?></td>
                    <td><?php echo $param[3]?></td>
                    <td><?php echo (isset($param[4]) && $param[4]) ? '√' : '' ?></td>
                </tr>
                <?php }?>
            </tbody>
            </table>
            <?php } else {?>
                            无
            <?php }?>
        </div>
        
        <div class="section second">
            <h3>返回格式</h3>
            <?php $return = Abyss::DocReturn($this->doc['return']);#echo '<Pre>';print_r($return);die;?>
            <table class="ui table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($return as $r) {?>
                <tr>
                    <td><?php echo $r[4] ? '<span class="slide-right"></span>' : ''?> <?php echo $r[1]?></td>
                    <td><?php echo Ucfirst($r[0])?></td>
                    <td><?php echo $r[2]?></td>
                </tr>
                <?php }?>
            </tbody>
            </table>
            
            <h3>返回样例</h3>
            <div class="code"><?php echo $this->example?></div>
        </div>
        
        <div class="section third">
        <form class="ui form">
            <?php foreach($params as $param) {?>
            <div class="field">
            <label><?php echo $param[2]?><?php if($param[3]) {?><i style="color:red;margin-left:5px;">*</i><?php }?></label>
            <input name="<?php echo $param[1]?>" placeholder="" type="text" value="<?php echo $param[3]?>" <?php if($param[3]) {?>require="require"<?php }?>>
            </div>
            <?php }?>
            <button class="ui primary button" type="submit">运行</button>
            
            <div id="RunResult" style="margin-top:15px;">
            
            </div>
        </form>
        </div>
    </div>
  </div>
  
  
<script type="text/javascript">
$(function() {
    $('.code').each(function() {
        var $this = $(this);
        var code = $.trim($(this).text());
        data = JSON.parse(code);
        var node = new PrettyJSON.view.Node({
            el: $this,
            data: data
        });
        node.expandAll();
    });

    $('.section-block .menu .item').bind('click', function() {
        var section = $(this).data('section'), $this = $(this);
        $(this).closest('.section-block').find('.section').each(function() {
            $this.addClass('active').siblings('.item').removeClass('active');
        	if($(this).hasClass(section)) {
            	$(this).show();
        	} else {
     		    $(this).hide();
        	}  
        });
    });

    $('button[type="submit"]').bind('click', function() {
        var $this = $(this);
        $this.addClass('loading');
        $.ajax({
            'url' : '<?php echo SCS::url()->create('doc/run', 'api/'.$this->api)?>',
            'type' : 'post',
            'data' : $this.closest('form').serialize(),
            'success' : function(data) {
                $this.removeClass('loading');
                try {
                    data = JSON.parse(data);
                    var node = new PrettyJSON.view.Node({
                        el: $('#RunResult'),
                        data: data
                    });
                    node.expandAll();
                } catch(e) {
                    $('#RunResult').html('<span style="color:#080;">'+data+'</span>');
                }
            },
            'error' : function() {
            	$this.removeClass('loading');
            }
        });
        return false;
    });
});
</script>
</body>

</html>